<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <details>
    </details>
</body>
<script>
    var $ = document.querySelector('details')
    var str = ''
    var list = [
        {
            id: 1,
            name: 'item1',
            sub: [{
                id: 1,
                name: 'item1-1'
            }, {
                id: 2,
                name: 'item1-2'

            },
            ],
        }, {
            id: 2,
            name: 'item2',
            sub: [{
                id: 1,
                name: 'item2-1'
            }, {
                id: 2,
                name: 'item2-2'

            }],
        }, {
            id: 3,
            name: 'item3',
            sub: [{
                id: 1,
                name: 'item3-1'
            }, {
                id: 2,
                name: 'item3-2'

            }]
        }
    ]
    var count = 0
    for (let i = 0; i < list.length; i++) {
        count++
        console.log(count);
        str += `<details> 
            <summary>
                ${list[i].name}
            </summary>
            ${list[i].sub && list[i].sub.map(e => {
            return `<div>${e.name}</div>`
        })}
            </details>`
    }
    $.innerHTML = `<summary>main</summary>`
    $.innerHTML += str 
</script>

</html>